<template>
	<view class="wrap-tabBar safe-area">
		<view class="tabBar flex align-center">
			<view class="tabBar-item flex align-center just-center f-30"
				:class="current === 0 ? 'active' : ''"
			>
				首页
			</view>
			
			<view class="tabBar-item flex align-center just-center f-30"
				:class="current === 1 ? 'active' : ''"
			>
				商城
			</view>
			
			<view class="tabBar-item flex align-center just-center">
				<view class="add-btn flex align-center just-center" @click.stop="onAdd">
					<image class="add" src="/static/tabBar/add.png" />
				</view>
			</view>
			
			<view class="tabBar-item flex align-center just-center f-30"
				:class="current === 2 ? 'active' : ''"
			>
				消息
			</view>
			
			<view class="tabBar-item flex align-center just-center f-30"
				:class="current === 3 ? 'active' : ''"
			>
				我
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 当前
			 */
			current: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
			}
		},
		methods: {
			/**
			 * 添加
			 */
			onAdd() {
				uni.navigateTo({
					url: "/pages/add/add"
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap-tabBar {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 100vw;
		overflow: hidden;
		z-index: 99;
		background-color: white;
		
		.tabBar {
			width: 100%;
			overflow: hidden;
			border-top: 2rpx solid #EEEEEE;
			
			.tabBar-item {
				flex: 1;
				height: 100rpx;
				overflow: hidden;
				color: #999999;
				
				.add-btn {
					width: 80rpx;
					height: 50rpx;
					border: 6rpx solid #707070;
					border-radius: 10rpx;
					overflow: hidden;
					
					.add {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			.active {
				color: #333333 !important;
			}
		}
	}
</style>